{% extends "dash/base_dash.html" %}

{% load avatar_tags %}

{% block mystylesheet %}
    <link rel="stylesheet" href="{{ STATIC_URL }}css/styleMati.css" type="text/css" />
    <link rel="stylesheet" href="{{ STATIC_URL }}css/style-icon-images.css" type="text/css" />
    <link href="{{ STATIC_URL }}css/tour/prism.css" rel="stylesheet">
    <link href="{{ STATIC_URL }}css/tour/bootstrap-tour.css" rel="stylesheet">
    <link href="{{ STATIC_URL }}css/tour/index.css" rel="stylesheet">
{% endblock mystylesheet%}

{% block myjavascript %}
    <script src="{{ STATIC_URL }}js/tour/bootstrap-tour.js"></script>
    <script src="{{ STATIC_URL }}js/tour/logbook_tour.js"></script>
    <script src="{{ STATIC_URL }}js/tour/jquery.smoothscroll.js"></script>
{% endblock myjavascript %}


{% block menuOptions %}
{% if user.persona %}
<li><a href="{% url 'dashboard' %}">Dashboard</a></li>
<li class="active"><a href="{% url 'logbook' %}">Logbook</a></li>
{% else %}
<li><a href="{% url 'dash_empresa' %}">Dashboard</a></li>
<li><a href="{% url 'dash_planes' %}">Planes</a></li>
{% endif %}
{% endblock menuOptions %}


{% block dashboard %}
    <div class="page-header">
        <h1>Actividad de los usuarios que tu sigues</h1>
    </div>
    <div id="logbook" class="logbook-content-list">
        {% if actividades %}
            {% for actividad in actividades %}
                <div class="panel panel-{% if actividad.tipo == "fan" %}warning{% elif actividad.tipo == "comentario" %}success{% elif actividad.tipo == "recomendacion" %}info{% endif%}">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-md-12"><a href="/dash/logbook/{{ actividad.usuario_origen.id }}">{{ actividad.usuario_origen.first_name }} {{ actividad.usuario_origen.last_name }}</a>
                                {% if actividad.tipo == "fan" %}
                                se hizo Fan de
                                {% elif actividad.tipo == "comentario" %}
                                ha comentado
                                {% elif actividad.tipo == "recomendacion" %}
                                ha recomendado
                                {% endif%}
                                un Item
                        </div></div>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-2">
                                <a href="/dash/logbook/{{ actividad.usuario_origen.id }}"><div class="thumbnail"><img src="{% avatar_url actividad.usuario_origen 50 %}"/></div></a>
                            </div>
                            <div class="col-md-10">
                                <div class="well">{{ actividad.descripcion }} <a href="/items/item/{{ actividad.item.id }}">{{ actividad.item }}</a></div>
                                {% if actividad.tipo == "comentario" %}
                                <div class="well">
                                    <p>Su comentario fue:</p>
                                    <blockquote>{{ actividad.comentario.comentario }}</blockquote>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer">
                        <div class="row">
                            <div class="col-md-12">{{ actividad.fecha }}</div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        {% else %}
            Los usuarios que siguen no han realizado ninguna actividad en el sistema
        {% endif %}
    </div>
{% endblock dashboard %}

{% block sidebar %}
    <div class="sidebar-content">
            <div class="sidebar-user">
                <div class="user-name">Pablo Carnicero</div>
                <div class="user-stars">
                    <ul>
                        <li class="user-star"><img src="{{ STATIC_URL }}images/item-ratings.png" alt="Star" /></li>
                        <li class="user-star"><img src="{{ STATIC_URL }}images/item-ratings.png" alt="Star" /></li>
                        <li class="user-star"><img src="{{ STATIC_URL }}images/item-ratings.png" alt="Star" /></li>
                        <li class="user-star"><img src="{{ STATIC_URL }}images/item-ratings-blanca.png" alt="Star" /></li>
                        <li class="user-star"><img src="{{ STATIC_URL }}images/item-ratings-blanca.png" alt="Star" /></li>
                    </ul>
                </div>
            </div>
            <div id="stadisticas" class="sidebar-stadistic">
                <a href="#">
                    <div class="stadistic-fan sidebar-stadistic-item" title="Podés consultar de que items sos Fan">
                        <div class="stadistic-num">3</div>
                        <div class="stadistic-nom">Fans</div>
                    </div>
                </a>
                <a href="#">
                    <div class="stadistic-recomendations sidebar-stadistic-item">
                        <div class="stadistic-num">4</div>
                        <div class="stadistic-nom">
                            Usuarios sigo
                        </div>
                    </div>
                </a>
                <a href="#">
                    <div class="stadistic-comments sidebar-stadistic-item">
                        <div class="stadistic-num">8</div>
                        <div class="stadistic-nom">
                            Usuarios me siguen
                        </div>
                    </div>
                </a>
            </div>
            <div class="sidebar-menu-indicators">
                <a href="#">
                    <div class="menu-indicators" title="Revisá tus mensajes recibidos y enviados"><div class="mini-img-msg"></div>Mensajes
                        <span class="badge">3</span>
                    </div>
                </a>
                <a href="#">

                    <div class="menu-indicators" title="Revisá los eventos que creaste y a los cuales estas invitado"><div class="mini-img-event"></div>Eventos
                        <span class="badge">2</span>
                    </div>
                </a>
                <a href="#">
                    <div class="menu-indicators" title="Revisá cuales son tus notificaciones de parte de tus productos favoritas"><div class="mini-img-notify"></div>Notificaciones
                        <span class="badge">6</span>
                    </div>
                </a>
                <a href="#">
                    <div class="menu-indicators" title="Revisá las recomendaciones que te hicieron los usuarios que seguís"><div class="mini-img-recom"></div>Recomendaciones
                        <span class="badge">3</span>
                    </div>
                </a>
                <a href="#">
                    <div class="menu-indicators" title="Revisá las consultas realizadas a las empresas"><div class="mini-img-consulta"></div>Consultas
                        <span class="badge">1</span>
                    </div>
                </a>
            </div>
            </div>
            <div class="sidebar-new-item">
                <a href="#"><div class="new-item-buttom">Crear Item</div></a>
            </div>
            <div class="clear"></div>
        </div>
{% endblock sidebar %}
